<template>
  <div>
    <!-- table:表格对应的数据 -->
    <!-- row-key="id":表格选择的依据,通过id选择,必填项 -->
    <!-- default-expand-all:自动展开数据 -->
    <!-- tree-props:属性数据的属性 -->
    <!-- 1.引入表格和创建依赖数据 -->
    <!-- 4.改变表格对应的字段值 -->
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="uid" label="ID" sortable width="330">
      </el-table-column>
      <el-table-column prop="username" label="用户名" sortable width="100">
      </el-table-column>
      <el-table-column prop="rolename" label="角色名称" sortable width="120">
      </el-table-column>

      <el-table-column prop="type" label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.type === 1" type="success">目录</el-tag>
          <el-tag v-else type="danger">菜单</el-tag>
          <!-- {{ scope.row }} -->
          <!-- {{ scope.row }} 是作用域接收的全部数据-->
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column prop="icon" label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            circle
            @click="edit(scope.row)"
          ></el-button>
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            circle
            @click="del(scope.row.uid)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <!-- 
    1.总条数，（后端知道，前端不知道，要发送请求，
    2.每页显示几条？
    3.分成几页=总条数/每页显示条数，有余数就向上取整，
    4.当前页码数） -->
    <!-- 
    current-change：修改页面，就是跳转页面
    current-page：页码数
    page-size：每页显示几条
    layout：要显示的上一页\下一页的控件
    total:总条数 
    -->
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="size"
      layout="total, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
/* 02.1 导入请求接口 */
/* 02.2 获取用户数据总条数、*/
import { getUserList, getUserCount, userDelete } from "../../api.js";

export default {
  data() {
    return {
      tableData: [],
      // 01.将分页控件依赖项配置好
      /* 当前页码数为几 */
      currentPage: 1,
      /* 每页显示几条 */
      size: 2,
      /* 数据总条数 */
      total: 1,
    };
  },
  created() {
    // 01.1 请求用户列表，因为要再点击后再次调用，所以进行封装，请求放在函数中
    // 获取总的页数先渲染分页控件
    this.getTableList();
    this.getuserlist();
  },
  /* 3.2 在methods中封装async函数进行请求，在钩子函数中调用*/
  methods: {
    // 02.1 通过ele封装的方法获取当前页的函数
    handleCurrentChange(val) {
      // 02.2 将当前点击页赋值给data中对应的键
      this.currentPage = val;
      // 03.4 在点击新的页数后，数据更新，再次调用更新列表的函数，该函数会携带最新的页数去后台请求，驱动页面更新
      this.getuserlist();
    },
    /* 01.2 获取用户总数 */
    async getTableList() {
      // 01.3 请求获取总数据接口
      let res = await getUserCount();
      // 01.4 将响应的结果赋值给组件依赖的值
      // 01.5 将总页数赋值给data中对应的键
      // console.log(this.total);
      this.total = res.list[0].total;
      // 01.6 ele会根据封装的函数自动计算分页器显示多少页
      // 通过此函数调用获取用户列表函数
    },
    // 03. 1获取用户列表
    async getuserlist() {
      //  03.2 传当前的条数和当前的页数
      let res = await getUserList({
        size: this.size,
        page: this.currentPage,
      });
      // console.log(res);
      // 03.3 再将当前相应的数据给表格进行渲染
      this.tableData = res.list;
    },
    // 更新分页器
    updataTotal() {
      this.getTableList();
      this.getuserlist({
        size: this.size,
        page: this.currentPage,
      });
    },
    /* 8.编辑功能 */
    /* list子->index父元素->info子元素 */
    edit(info) {
      this.$emit("edit", info);
    },
    /* 7.删除功能 */
    del(uid) {
      // console.log(uid);
      /* 7.1二次确认弹窗,再点击前再出现一个弹窗进行确认 */
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        //7.3确认删除走then分支
        .then(async () => {
          /* 7.4导入接口，传入必要的参数id */
          let res = await userDelete({ uid });
          /* 7.5 将返回的新数据直接赋值给表格,减少一次请求，直接更新数据 */
          this.tableData = res.list;
          /* 7.6对删除状态进行提示 */
          if (res.code === 200) {
            this.$message({
              type: "success",
              message: "删除成功",
            });
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            });
          }
          this.getTableList();
        })
        //7.4取消删除走.catch分支
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  // 更新分页数据
  // 新增后再次调用这个函数拿到总个数进行渲染
};
</script>

<style>
</style>